import { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import FastImage from "react-native-fast-image";
import Icon from "react-native-vector-icons/AntDesign";
const FollowingCartoonView = ({ item }: { item: any }) => {
  const [isFollowing, setIsFollowing] = useState(false);

  const handlePress = () => {
    setIsFollowing(p=> !p);
  };

  return (
    <View style={styles.container}>
      <FastImage
        resizeMode="cover"
        style={styles.avatar}
        source={{ uri: item.avatar }}
      />
      <Text style={styles.name}>{item.name}</Text>
      {
        !isFollowing && (
          <TouchableOpacity onPress={handlePress}>
            <View style={styles.followButton}>
              <Icon name={"plus"} size={16} color="white" />
            </View>
          </TouchableOpacity>
          )
      }
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 90,
    width: 70,
    marginHorizontal: 2,
    alignItems: "center",
    //backgroundColor: "blue",
  },
  avatar: {
    height: 60,
    width: 60,
    borderRadius: 10,
  },
  name: {
    color: "black",
    fontSize: 15,
    marginTop: 10,
  },
  followButton: {
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    width: 24,
    height: 18,
    alignSelf: "center",
    bottom: 20,
    backgroundColor: "#3BC859",
    borderRadius: 12,
  },
});

export default FollowingCartoonView;
